<template>
  <div class="touxiang">

      <form action="">
		</form>

		<div id="img-list">
			<img v-for="i in files" :src="i" class="images" :key="i">
			<label for="file-selector" id="file-label">+</label>
			<input id="file-selector" type="file" accept="image/jpeg,image/png,image/gif" @change="chooseImage" multiple>
		</div>
		<div id="btn">
			<button @click="btnClick">提交</button>
			<p>
				<a v-show="show1" :href="'#/uset/'+id">上级</a>
			</p>
		</div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      name: "",
      files: [],
      photo: [],
      show1: false,
      id: ""
    };
  },
  methods: {
    chooseImage: function(e) {
      var that = this;
      for (var i = 0; i < e.target.files.length; i++) {
        var f = e.target.files[i];
        this.photo.push(f);
        var url = URL.createObjectURL(f);
        this.files.push(url);
      }
    },
    btnClick: function() {
      var that = this;
      var data = new FormData();
      var ids = this.$route.params.name;
      //   console.log(ids);
      that.id = ids;
      for (var i = 0; i < this.photo.length; i++) {
        data.append("img", this.photo[i]);
      }
      data.append("url", this.files);
      data.append("ids", ids);
      //   console.log(data);
      this.$axios
        .post("/top/touxiang/:ids", data, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(function(result) {
          if (result.data.error == 0) {
            that.show1 = true;
          } else {
            alert(result.data.message);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
.touxiang {
  margin-top: 85px;
}
header {
  background: pink;
  padding: 5px 10px;
  border-bottom: solid 1px #ccc;
}
header img {
  width: 25px;
}
header h4 {
  width: 58%;
  float: right;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
form p {
  margin: 10px 0 10px 15px;
  border-bottom: solid 1px #eee;
}
form select {
  width: 200px;
  border: none;
  background: none;
}
form input {
  height: 35px;
  width: 60%;
  border: none;
  background: none;
}
#white {
  margin: 8px;
  padding: 8px 15px;
  background-color: #f5f5f5;
}

#white span {
  font-size: 14px;
  text-align: center;
  color: #29b0fa;
}

#white input {
  margin-left: 6px;
  height: 36px;
  width: 240px;
  border: none;
  font-size: 11px;
}

#white input:nth-of-type(1) {
  border-bottom: solid 1px #dddddd;
}

#top,
.bottom {
  height: 36px;
  line-height: 36px;
}

#file-selector {
  display: none;
}

#file-label {
  width: 100px;
  height: 100px;
  border: solid 1px black;
  border-radius: 5px;
  display: inline-block;
  font-size: 80px;
  text-align: center;
  line-height: 80px;
  margin-left: 10px;
  vertical-align: top;
}

.images {
  width: 90px;
  height: 100px;
  border-radius: 5px;
  /*border: solid 1px black;*/
  margin-left: 10px;
}

#root > label {
  font-size: 14px;
  color: #29b0fa;
}

#btn {
  width: 100%;
  text-align: center;
  margin: 40px 0;
}

#btn button {
  color: white;
  background-color: pink;
  border: none;
  width: 290px;
  height: 45px;
  border-radius: 5px;
}
</style>

